/*----------------------------chat.less(start)----------------------------*/
$chat-odd-bg:#ddd;
$chat-even-bg:#b8daff;
.chat{
	padding:8px;
	box-sizing:border-box;
	li{
		margin-bottom: 24px;
		&:after{
			display: table;
		    content: " ";
		    clear: both;
		}
	}
	.chat-photo {
		width: 40px;
		display: inline-block;
		text-align: center;
		float: left;
		img {
			width: 100%;
			border-radius: 100%;
		}
		.chat-photo-author {
			font-size: $font-size-S;
			font-style: normal;
			color:$placeholder;
		}
	}
	.chat-content-box {
		display: inline-block;
		float: left;
		margin-left: 12px;
		width: 70%;
	}
	.chat-content {
		display: inline-block;
		position: relative;
		padding: 10px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;

		background-color: $chat-odd-bg;

		&:after {
			border-color:transparent;
			border-right-color:$chat-odd-bg;

			position: absolute;
			right: 100%;
			top: 20%;
			height: 0;
			width: 0;
			content: " ";
			border-width: 5px;
			margin-top: -5px;
			border-style:solid;
		}
		.chat-content-author {
			display: block;
			position: relative;
			font-style: normal;
			font-size: $font-size-S;
		}
		p {
			line-height: 24px;
			margin: 0;
			padding-top: 3px;
			text-align:left;
			[data-emoji]{
				width:26px;
				height: 24px;
			}
		}
	}

	.even{
		.chat-photo {
			float: right;
		}
		.chat-content-box {
			width: 70%;
			margin-right: 12px;
			text-align: right;
			float: right;
		}
		.chat-content{
			background-color:$chat-even-bg;
			&:after {
				left: 100%;
				top: 20%;
				border-color: transparent;

				border-left-color: $chat-even-bg;
			}
		}
	}

}
/*----------------------------chat.less(end)----------------------------*/
